<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link rel="shortcut icon" href="images/icon.png" />
        <title>Atlas</title>


   <meta name="viewport" content="width=device-width, initial-scale=1.0, height=device-height,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">


        <meta name="MobileOptimized"  />
        <meta name="PalmComputingPlatform" content="true" />






        <link rel="stylesheet" href="dist/leaflet.css" />
        <!--<link rel="stylesheet" href="css/leaflet.css" />-->

		<link rel="stylesheet/less" type="text/css" href="css/leaflet.less">
		<script src="js/less/less-1.3.3.min.js" type="text/javascript"></script>







        <!--[if lte IE 8]><link rel="stylesheet" href="../dist/leaflet.ie.css" /><![endif]-->
        <link rel="stylesheet" href="css/website.css" type="text/css" media="screen"/>



		<!--<script type="text/javascript" src="../build/scripts.min.js"></script>-->

		<script src="dist/leaflet.js"></script>
		<script src="js/requirejs/require.js"></script>
		<script src="js/geoMarker.js"></script>
		<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.1.custom.min.js"></script>
        <script type="text/javascript" src="js/jquery-tpml.js"></script>
        <script type="text/javascript" src="js/EventBlock.js"></script>
        <script type="text/javascript" src="js/jquery.tinyscrollbar.js"></script>
	    <script type="text/javascript" src="js/jquery-draggable.js"></script>
        <script src="calendar_ru.js" type="text/javascript"></script>
		<script type="text/javascript" src="js/app.js" ></script>
		<script src="calcTime.js" type="text/javascript"></script> <!-- класс расчета времени и даты -->
		<script src="js/DtpEvent.js" type="text/javascript">  </script><!-- на карте -->
		<script src="send.js" type="text/javascript"></script>  <!-- отправка емайла -->
		<script src="vhide.js" type="text/javascript"></script>
		<script src="js/registerdevise.js" type="text/javascript"></script>
		<script src="clock.js"></script>  <!-- часы текущее время -->
		<script src="js/AlertMsg.js"></script>  <!-- тревожные сообщения-->
		<script src="js/geocoding.js"></script>










        <!--<script src="azimut_ico.js" type="text/javascript"></script>-->
        <!--<script type="text/javascript" src="js/DtpOnMap.js" ></script>-->

       <!-- <script type="text/javascript" src="js/CanvasMarker.js" ></script>-->
        <!-- <script type="text/javascript" src="js/GeoCoder.js" ></script>-->
	    <!--	<script src="graphSpeed.js" type="text/javascript">  </script> --> <!-- класс рисования графика скорости -->







      <!--  <script src="js/yandex.js" type="text/javascript"></script> -->
       <!-- <script src="js/leaflet.polylineDecorator.js"></script>-->
        <!--<script src="layer/Yandex.js"></script>-->




		   <script type="text/javascript">
             //todo document ready
             var brr = '<?php echo $brr ?>';
             var pass="<?php echo  $pass; ?>";
             var scrollbar1, scrollbar2;
         $(document).ready(function(){
           // alert(brr);


			 if (brr != 'Android') { //если браузер не андроид
				 $("#div_report").draggable();
				 $("#div_setting").draggable({ handle: ".title" });
				 $("#div_personal").draggable({ cancel: ".scrollbar, textarea" });
				 scrollbar1 = $('#scrollbar1').tinyscrollbar({invertscroll: true, wheel: 20});
				 scrollbar2 = $('#scrollbar2').tinyscrollbar({invertscroll: true, wheel: 20});
				 scrollbar4 = $('#scrollbar4').tinyscrollbar({invertscroll: true, wheel: 40});
			 } else {
				 scrollbar1 = $('#scrollbar1').tinyscrollbar({invertscroll: true, wheel: 1});
				 scrollbar2 = $('#scrollbar2').tinyscrollbar({invertscroll: true, wheel: 1});
				 scrollbar4 = $('#scrollbar4').tinyscrollbar({invertscroll: true, wheel: 40});
			 }
			 require.config({
				 waitSeconds: 60,
				 baseUrl: '',
				 paths: {
					 text: 'js/requirejs/text'
				 }
			 });



			 app.init();
			 document.getElementById("geosearch_v").onclick = function () {
				 geocoding.vhide();
			 }
			 $('#statistics').click(function () {
				 vhide(this);
				 $('#form_statistics').submit();
			 })

		/*	 $('.button.zone').click(function(){
				 var s = this;
				 require([
				 	'js/zone'
				 ],function(){
					 eval('zone').vhide($(s))
				 })
			 })*/

			 $.ajax({
				 type: 'POST',
				 url: 'refactor.php',
				 data: 'pass=' + pass + '&login=' + login,
				 success: function (data) {
					 console.log(data);
				 },
				 error: function (xhr, status, error) {
					 console.log('err refactor');
				 }

			 });


		 });
		</script>
    </head>
    <body onload="activSite(); ">


<!-- todo отображение дтп на карте за период -->
         <div class="border-ridge bg" id="selectPeriodDtp" style="
             top: 32px;
             left: 50%;
             width: 210px;
             position: absolute;

             z-index: 2;
             visibility: hidden;

             box-shadow: 0px 0px 10px #000, 2px 2px 5px #fff;
             margin-left: -105px;
             text-shadow: none;">

             <table cellpadding="0" cellspacing="0" style="width: 100%" class='title'>
                 <tr>
                     <td align='center'>Event / События  </td><td class="cancel" width='20' onclick="vhide({id:'statisticsOnMap', element: 'mh'})"></td>
                 </tr>
             </table>
             <p align="center">From date / От даты</p>

             <form action="" style="z-index: 3" >

                 <p style="margin-top:0px; z-index: 3" align="center"  ><input id="dtp_from" style="z-index: 3" type="text" value="dd-mm-yy" name="mydata" onfocus="this.select();lcs(this)" onclick="event.cancelBubble=true;this.select();lcs(this)" >	</p>

             </form>
             <p align="center">To date / До даты</p>

             <form action="" style="z-index: 3" >

                 <p style="margin-top:0px; z-index: 3"  align="center" ><input id="dtp_to" style="z-index: 3" type="text" value="dd-mm-yy" name="mydata" onfocus="this.select();lcs(this)" onclick="event.cancelBubble=true;this.select();lcs(this)" >	</p>

             </form>

             <table cellpadding="0" cellspacing="0" style="width: 100%; margin-top: 5px" class='border_top'>
                 <tr>
                     <td  class ='title'><input type="checkbox" name="optDtp" id="checkDtp" > ДТП </td>

                 </tr>
                 <tr>
                     <td  class ='title'><input type="checkbox" name="option1" id="checkMaulfanction" > Maulfanction</td>
                 </tr>
                 <tr>
                     <td  class ='title'><input type="checkbox" name="option1" id="checkOther" > Other</td>
                 </tr>
                 <tr>
                     <td class='button' height='26' align ='center' onclick="dtpOnMap.showDivSelect()">
                         Show
                     </td>

                 </tr>
                 <tr>
                     <td class='button' height='26' align ='center' onclick="dtpOnMap.hideDtp()">
                         Hide
                     </td>

                 </tr>
             </table>
         </div>
     </div>


        <div id="loader" class="loader" style="display:none; padding: 10px;">

           <table style="width: 100%; height: 100%; margin: auto">
               <tr>
                   <td id='mess_alert' style="height: 80%; text-align: center; color: #ffffff">

                   </td>
               </tr>
               <tr >
                   <td align='center'>
                       <div id="alert_ok" class="button2" style="width: 50%; " onclick="alertMsg.hide()">
                           Ok
                       </div>
                   </td>
               </tr>
           </table>
            <!-- <img id="img-loader" src="images/ajax-loader.gif" alt="Loading..."/>-->
        </div>
        <div style="width: 100%; height: 100%;">
            <div id="header" >

                <div class="left-menu" style="" >
                    <table   style="width: 100%; height: 20px;border-spacing:0;" valign="center" cellpadding="0" cellspacing="0">
                        <tr style=" margin: -2px">

                            <td id= "target" class="button" style="" align="center"  valign="center" rowspan="2" onclick="vhide(this)">
                                Target
                            </td>
							<td class="button zone" module="zone" rowspan="2">
								zone
							</td>
                            <td class="timer" style="height: 16px">
                                <p style="" id="clock" >no link</p>
                            </td>


                            <td  class="button" id="setting" onclick="vhide(this)" style="width:25px;vertical-align:center;horizontal-align:center;" rowspan="2">
                                <img src="images/setting.png" style="margin:1px;width:20px;height:20px" title="setting">
                            </td>

                        </tr>

                        <tr>
                            <td  class="timer"  style="" ><p style="" id="clock2" >no link</p></td>
                        </tr>
                    </table>
                </div>


				<div class = "right-menu">
					<div class="button ex" >
						<div class="exit">

						</div>
					</div>
					<div class="button i" id="information">
						<div >
							Information
						</div>

					</div>
					<div class="button geo" id="geosearch_v">
						<div >
							<img src="images/lupa.png"   >
						</div>

					</div>
					<div class="button mh" id="but_mh" onclick="vhide(this)">
						<div >
							<img src="images/oblasti.png"   >
						</div>

					</div>
				</div>


            </div>

            <div id="map" style="width: 100%; height: 100%; margin: auto; z-index: 1" >

            </div>


        </div>
        <div align="center" style=" position: absolute; top: 3px; left: 50%; width: 40px; height: 17px; margin-left: -12px; ">
            <img src="images/logo.png" style="margin-top: 5px; z-index: 1"  >
        </div>



        <div class="border-ridge bg" id="div_avto" style="top: 32px; width: 170px; position: absolute;
             z-index: 2;

             visibility: hidden;
             text-shadow: none">
            <div id="scrollbar1" style="z-index: 2; margin: 0 auto;">
                <div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>
                <div class="viewport">
                    <div class="overview">

                    </div>
                </div>
            </div>
            <div class="pointer"  style="width: 170px;    position:absolute; bottom: 0px;"  >
                <table style="width: 170px; font-size: 10px;" align = " center" cellpadding="0" cellspacing="0">
                    <tr>
                        <td class="button"  module="report" id= "k_report" colspan="2" align="center"  style="width: 100%; font-size: 12px;   height: 25px; "> Report</td>
                    </tr>
                </table>
            </div>
        </div>



        <div class="border-ridge bg" id="div_information" style="top: 32px; width: 170px;  position: absolute;  right: 0px;
             z-index: 2;

             visibility: hidden;
             text-shadow: none">
				<div id="scrollbar2" style="z-index: 2; margin: 5px auto;">
                <div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>
                    <div class="viewport">
                        <div class="overview">

                                <table style="width: 160px; " align = " center" cellpadding="0" cellspacing="0">
                                    <tr>
                                        <td id ="infoText" class="pointer" colspan="2" align="left"  valign ="top" style="width: 100%;  "></td>
                                    </tr>
                                </table>
                         </div>
                     </div>
                </div>
		<script type="text/javascript">

		</script>



            <div id="action_event"   style="width: 170px;     position:absolute; bottom:0px;"  >
                <table style="width: 100% ;margin:0px; font-size: 11px" align = " center" cellpadding="0" cellspacing="0">
                    <tr>
                        <td class="button" id="send_email" onclick = "vhide(this)" align="center"   style="width: 100%;  height: 25px;">send em@il<span id=""></span></td>
                        <td class="button" id="send_personal" onclick = "vhide(this)" align="center"   style="height: 25px;">Personal</td>
                        <td class="button" id="confirm_event"  align="center"   style="width: 50%; height: 25px; font-size: 11px">Confirm<span id="span_event"></span></td>

                    </tr>
                </table>


                    <table style="width: 100% ;margin:0px;" align = " center" cellpadding="0" cellspacing="0">
                    <tr  >
                        <td class="pointer" id = "accident" onclick = "clickType(this)" align = "center"   style="width: 50%;   height: 25px;  "> <img src="images/dtp.png" style="margin-bottom:-2px" ><p id="accidentText">Accident</p></td>
                        <td class="pointer" id = "malfunction"  onclick = "clickType(this)" align = "center"   style="width: 50%;  height: 25px; "> <img src="images/ins.png" style="margin-bottom:-2px" ><p id="malfunctionText">Malfunction</p></td>
                    </tr>
                 </table>
                <table style="width: 100% ;margin:0px;" align = " center" cellpadding="0" cellspacing="0">

                    <tr>
                        <td class="button" id="markMap"  align="center" colspan="2"   style="width: 100%;  height: 25px; ">Добавить событие</td>
                    </tr>

                    <tr>
                        <td class="button" id="removeDtp"  align="center"     style="width: 50%;  height: 25px;">Remove</td>
                        <td class="button" id="resetParam"  align="center"     style="  height: 25px;">Reset</td>
                    </tr>
                </table>
            </div>

        </div>









<!-- todo setting -->
        <div class="border-ridge bg-white" id="div_setting" style="
             top: 40px;
             left: 50%;
             width: 300px;
             position: absolute;

             z-index: 2;

             box-shadow: 0px 0px 10px #000, 2px 2px 5px #fff;
             margin-left: -150px;
             visibility: hidden;
             text-shadow: none;">
            <table cellpadding="0" cellspacing="0" style="width: 100%;" class='title'>
                <tr>
                    <td align='center'><p style="margin-right: -20px">Setting</p> </td><td class="cancel" width='20' onclick="vhide({id:'setting'})"></td>
                </tr>
            </table>
            <table class="map-params" style="margin-top: 10px">
                <tr>
                    <td>UTC</td>
					<td><input style="text-align: center"  name="gmt" type="text" size="2" > </td>
					<td></td>
					<td></td>
					<td height="20px" ><div class="button" onclick="set.gmtchange()">  </div></td>
                </tr>
				<tr>
					<td>Start zoom</td>
					<td><input style="text-align: center" name="zoom" type="text" size="2" > </td>
					<td></td>
					<td></td>
					<td height="20px" ><div class="button" onclick="set.zoomchange()">  </div></td>

				</tr>
				<tr>
					<td>Start center</td>
					<td><input style="text-align: center" name="center_lat" type="text" size="2" > </td>
					<td><input style="text-align: center" name="center_lng" type="text" size="2" > </td>
					<td height="20px" onclick="set.center.get(this)"><div class="button set-center">  </div></td>
					<td height="20px" onclick="set.center.save()"><div class="button">  </div></td>
				</tr>
            </table>
			<table style="width: 100%" class="nn" >
				<tr>
					<td style="width: 90px">
						imei
					</td>
					<td>
						device name
					</td>
					<td>
						phone
					</td>
				</tr>
			</table>

            <table id="register_divise" style="font-size: 10px;">
                <tr class="${sprite}">
                    <td class="imei" >
                         <input type="text" value="${imei}">
                    </td>
                    <td class="name">
                        <input type="text" value="${name}">
                    </td>
                    <td class="phone">
                        <input type="text" value="${phone}">
                    </td>
                    <td class="checkbox">
                        <input type="checkbox">
                    </td>
                </tr>

            </table>

            <table class="font" style=" margin: 5px">
                <tr>
                    <td id= "add_divise" align="center" class="button" onclick="set.regist()" style="width: 158px; margin: 5px auto; height: 25px; ">
						add device
                    </td>

                    <td id="rem_devise" align="center" class="button" onclick="set.rem()" style="width: 158px; margin: 1px auto; height: 25px">
                        remove device <span id="i_rem_dev"></span>
                    </td>
                </tr>
            </table>
        </div>


<!--todo personal-->
     <div class="border-ridge bg-white" id="div_personal" style="
             top: 40px;
             left: 50%;
             width: 400px;
             position: absolute;

             z-index: 2;

             box-shadow: 0px 0px 10px #000, 2px 2px 5px #fff;
             margin-left: -200px;
             visibility: hidden;
             text-shadow: none;
             display: none;">
         <table  style="width: 100%;" class='title'>
             <tr>
                 <td align='center'><p style="margin-right: -20px">Personal</p> </td><td class="cancel" width='20' onclick="vhide({id:'send_personal'})"></td>
             </tr>


         </table>
         <div style="margin-right: 2px;">
                 <textarea id="perconal_comment" rows="4" style="width: 100%; border: 1px solid #ff8a00; background: url(images/bg.png);"></textarea>
         </div>
         <div  class='title'>

             <table style="width: 100%; font-size: 11px;border-spacing: 2px;"  >

                 <tr>
                     <td style="width: 30px; font-size: 12px">N</td>
                     <td style="width: 140px;font-size: 12px">User</td>
                     <td class="check">Email</td>
                     <td class="check">phone 1</td>
                     <td class="check">phone 2</td>

                 </tr>

                 <tr>

                     <td style="width: 30px"></td>
                     <td style="width: 140px"></td>
                     <td class="check button2"  onclick="loadPersonal.clear('is_alert')" >-</td>
                     <td class="check button2" onclick="loadPersonal.clear('is_alert1')" >-</td>
                     <td class="check button2" onclick="loadPersonal.clear('is_alert2')" >-</td>

                 </tr>
                 <tr>
                     <td style="width: 140px; text-align: center" colspan="2" class="button2" onclick="loadPersonal.parseData()">Default</td>
                     <td class="button2" colspan="3" style="text-align: center" onclick="loadPersonal.clear('oll')">Clear all</td>

                 </tr>
             </table>

         </div>

          <div style="padding: 2px 0 5px 5px; border-radius: 2px ">


             <div id="scrollbar4" style="z-index: 2; ; margin: 0px auto; height: 400px">
                 <div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>
                 <div class="viewport">
                     <div class="overview">
                         <div id="table_personal" style="width: 100%">
                         </div>
                     </div>
                 </div>
             </div>
          </div>







         <table width='100%' style="">
             <tr>

                 <td align="center"  class="button" onclick="loadPersonal.alertMsg()" style="  width: 50%; height: 25px;" >Send</td>
                <!-- <td align="center"  class="button" onclick="loadPersonal.save()" style="  width: 30%; height: 25px;" >Save</td>-->
                 <td align="center"   class="button" style="   height: 25px;" onclick="vhide({id:'send_personal'})">Cancel</td>
             </tr>
         </table>
     </div>




<!-- todo соммент дтп -->
        <div class="border-ridge bg" id="div_confirm_dtp" style="
             top: 10px;
             left: 50%;
             width: 180px;
             position: absolute;

             z-index: 4;

             box-shadow: 0px 0px 10px #000, 2px 2px 5px #fff;
             margin-left: -90px;
             visibility: hidden;
             text-shadow: none;">
			<table cellpadding="0" cellspacing="0" style="width: 100%;" class='title'>
				<tr>
					<td align='center'>Comment </td><td onclick="markMap()" class="cancel" width='20' ></td>
				</tr>
			</table>
            <table align="center" cellpadding="0" cellspacing="0">
                <tr>
                    <td colspan="2"  align="center" style=" height: 25px; margin:-2px; " >
                        <form>
                            <textarea id="commentText" rows="4" style="width: 177px; margin-left:-1px;  margin-bottom: -3px; background: url(images/bg.png);"></textarea>
                        </form>
                    </td>
                </tr>
                <tr>
                    <td align="center" id ="confirm" class="button" style="width: 178px;   height: 25px;" onclick="checkCon()">Confirm</td>
                    <td align="center" id="cancel_dtp"  class="button" style="width: 178px;   height: 25px; " onclick="markMap()" >Cancel</td>
            </table>
        </div>

         <div class="border-ridge bg" id="div_reMark_dtp" style="
                 top: 10px;
                 left: 50%;
                 width: 180px;
                 position: absolute;

                 z-index: 4;

                 box-shadow: 0px 0px 10px #000, 2px 2px 5px #fff;
                 margin-left: -90px;
                 visibility: hidden;
                 text-shadow: none;">
             <p align="center" style="   height: 25px; background-image: url(images/fon_nadpis.png); margin: auto; "> Change-Comment </p>
             <table align="center" cellpadding="0" cellspacing="0">
                 <tr>
                     <td colspan="2"  align="center" style=" height: 25px; margin:-2px; " >
                         <form>
                             <textarea id="reMarkText" rows="4" style="width: 177px; margin-left:-1px;  margin-bottom: -3px; background: url(images/bg.png);"></textarea>
                         </form>
                     </td>
                 </tr>
                 <tr>
                     <td align="center"  class="button" style="width: 178px;   height: 25px;" onclick="dtpEvent.reMarkEvent();vhide({id:'cancel_reMark'});" >Исправить</td>
                     <td align="center" id="cancel_reMark"  class="button" style="width: 178px;   height: 25px;" onclick="vhide({id:'cancel_reMark'});markMap()">Cancel</td>
             </table>
         </div>






        <div class="border-ridge bg" id="div_confirm_cancel_dtp" style="
             bottom: 25px;
             right: 25px;
             width: 180px;
             position: absolute;

             z-index: 2;

             box-shadow: 0px 0px 10px #000, 2px 2px 5px #fff;
             margin-left: -90px;
             visibility: hidden;
             text-shadow: none;">
            <table align="center" cellpadding="0" cellspacing="0" style="width: 180px;">
                <tr>
                    <td align="center" colspan="2" valign="center" style="   background-image: url(images/fon_nadpis.png);"><img src="images/rem_dtp.png"  ><span id="selectRemove"></span>
                    </td>
                </tr>
                <tr>
                    <td align="center" id ="confirm_remove" class="button" style="   height: 25px;" >Confirm</td>
                    <td align="center" id="cancel_remove"  class="button" style="   height: 25px;">Cancel</td>
                </tr>
            </table>
        </div>

        <div class="border-ridge" id="div_geosearch" style="
             top: 42px;
             left: 50%;
             width: 300px;
             position: absolute;
             background-image: url(images/fon_nadpis.png);
             z-index: 1;

             box-shadow: 0px 0px 10px #000, 2px 2px 5px #fff;
             margin-left: -150px;
             color: #0084c2;
             visibility: hidden;">
			<table cellpadding="0" cellspacing="0" style="width: 100%; padding: 2px" class='title'>
				<tr>
					<td align='center'><p style="margin-right: -20px">GEO Search!</p> </td><td class="cancel" width='20' onclick="geocoding.vhide()"></td>
				</tr>
			</table>
            <input id="address" style="width:296px;" type="text"/>
        </div>
        <!-- окошко рассылки емайлов -->
        <div id="div_send"  class="border-ridge" style="
             bottom: 100px;
             right: 160px;
             width: 180px;
             position: absolute;
             background-image: url(images/bg.png);
             z-index: 4;

             box-shadow: 0px 0px 10px #000, 2px 2px 5px #fff;
             visibility: hidden;

             text-shadow: none;">

            <p align="center" style="   height: 25px; background-image: url(images/fon_nadpis.png); margin: auto; "> Comment</p>
            <table align="center" cellpadding="0" cellspacing="0">
                <tr>
                    <td colspan="2"  align="center" style=" height: 25px; margin:-2px; " >
                        <form>
                            <textarea id="commentTextEmail" class="font" rows="4" style="width: 177px; margin-left:-1px;  margin-bottom: -3px; background: url(images/bg.png);"></textarea>
                        </form>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <input type="checkbox" id="alpha_sms" checked="checked"><span>alpha_sms</span><br/>
                        <input type="checkbox" id="kyivstar_sms" checked="checked"><span>kyivstar_sms</span><br/>
                        <input type="checkbox" id="email" checked="checked"><span>e-mail</span><br/>
                        <input type="checkbox" id="motokiev" checked="checked"><span>moto.kiev.ua</span>
                    </td>
                </tr>
                <tr>
                    <td align="center" id ="confirm_send" class="button" onclick="vhide(this);" style="width: 178px;   height: 25px;" >Alert</td>
                    <td align="center" id="cancel_send"  class="button" onclick="vhide(this)" style="width: 178px;   height: 25px;">Cancel</td>
                </tr>
            </table>
        </div>

        <div id="div_oblasti" class="border-ridge bg" style="
             top: 35px;
             right: 170px;
             width: 150px;
             position: absolute;

             z-index: 1;

             box-shadow: 0px 0px 10px #000, 2px 2px 5px #fff;
             margin-left: 0px;
             opacity: 0.8;
             color: #0084c2;
             visibility: hidden;">
            <!-- скрипт показа областей -->
        </div>

        <div id="mh" style="
             top: 35px;
             right: 170px;
             width: 150px;
             position: absolute;
             z-index: 1;
             box-shadow: 0px 0px 10px #000, 2px 2px 5px #fff;
             margin-left: 0px;
             visibility: hidden;
             opacity: 0;
             ">

            <div class="button" id="oblasti">
                <p  align="center" style="margin: 3px; "  >Wiki Области</p>
            </div>

			<form id="form_statistics" method="post"  target="blank" action="statistics.php" style="display: none;">
				<input name="login" type="text"  maxlength="15" style="whidth: 160px" value="<?php echo  $login.'!'.$pass_l; ?>" >  <!-- форма для перехода на страниицу статистики -->
			</form>

            <div class="button" id="statistics">
                <p  align="center" style="margin: 3px; "  >Статистика ДТП</p>
            </div>
            <div class="button" id="statisticsOnMap" onclick="vhide(this)">
                <p  align="center" style="margin: 3px; "  >ДТП на карте</p>
            </div>
            <!--<div class="button" id="btn_regions" onclick="vhide(this)">-->
          <div class="button" id="btn_regions" module ="region">
               <p  align="center" style="margin: 3px; "  >Регионы</p>
           </div>
           <div class="button"  module = 'weather'>
               <p  align="center" style="margin: 3px; "  >Борисполь радар</p>
           </div>
           <div class="button"  module = 'donor'>
               <p  align="center" style="margin: 3px; "  >Donor</p>
           </div>
       </div>
   </body>

   <script>
       //todo стартовые параметры
       var points = <?php echo  $points; ?>  ;
       var options = <?php echo  $options; ?>  ;
       var devices = <?php echo  $devices; ?>  ;
       var login="<?php echo  $login; ?>";
       var gspeed;



       var uzerClick=(-1);
       var selectUserImei;
       devices = JSON.parse(devices) ;
   </script>


   <script type="text/javascript">
       // todo расчет парметров экрана
       var width=document.body.clientWidth; // ширина
       var height=document.body.clientHeight; // высота
       var height_div_avto;
       var h;
       //alert(width);

       var w=(width-6)*100/width;

       h=100*35/height;
       //h=h+"px";
       h=100-h;
       h=h+"%";
       //alert(h);
       var h_txt;
       var cmpHeader = document.getElementById("header");
       var cmpMap = document.getElementById("map");
       var docWidth = (document.body.clientWidth -2) +'px';
       var docHeight = (document.body.clientHeight-15)+'px';
       h_txt=100-(100*120)/height;
       h_txt= h_txt+"%";

       height_div_avto =((height-40)/height)*100;
       height_div_avto=height_div_avto+"%";
       //alert(height_div_avto);
      // document.getElementById("header").style.width =  w+"%";
       document.getElementById("map").style.height =  (document.body.clientHeight-15)+'px';
    //   document.getElementById("div_avto").style.height =  height_div_avto;
       document.getElementById("div_avto").style.height = (document.body.clientHeight -34) +'px';
      // document.getElementById("div_information").style.height =  height_div_avto;
       document.getElementById("div_information").style.height =  (document.body.clientHeight -34) +'px';
       document.getElementById("header").style.width =  (document.body.clientWidth -2) +'px';
       ///document.getElementById("scrollbar1").style ="50px"

   </script>


   <script>
       //todo инициализация карты
   var project = function (map, crs, latlng) {
       return crs.latLngToPoint(latlng, map.getZoom());
   };

   L.TileLayer.prototype._update = function () {
       var bounds = this._map.getPixelBounds(),
               zoom = this._map.getZoom(),
               tileSize = this.options.tileSize;

       if (typeof this.options.crs !== 'undefined') {
           bounds.min = project(this._map, this.options.crs, this._map.unproject(bounds.min));
           bounds.max = project(this._map, this.options.crs, this._map.unproject(bounds.max));
       }

       if (zoom > this.options.maxZoom || zoom < this.options.minZoom) {
           return;
       }

       var nwTilePoint = new L.Point(
               Math.floor(bounds.min.x / tileSize),
               Math.floor(bounds.min.y / tileSize)),
               seTilePoint = new L.Point(
                       Math.floor(bounds.max.x / tileSize),
                       Math.floor(bounds.max.y / tileSize)),
               tileBounds = new L.Bounds(nwTilePoint, seTilePoint);

       this._addTilesFromCenterOut(tileBounds);

       if (this.options.unloadInvisibleTiles || this.options.reuseTiles) {
           this._removeOtherTiles(tileBounds);
       }
   };
   L.TileLayer.prototype._getTilePos = function (tilePoint) {
       var origin = this._map.getPixelOrigin(),
               tileSize = this.options.tileSize;

       if (typeof this.options.crs !== 'undefined') {
           origin = project(this._map, this.options.crs, this._map.unproject(origin));
       }

       return tilePoint.multiplyBy(tileSize).subtract(origin);
   };



       var map = new L.Map('map', {center: new L.LatLng(
               options.startCentre.lat ? parseFloat(options.startCentre.lat) : (50.442),
                       options.startCentre.lng ? parseFloat(options.startCentre.lng): (30.558)
       ),
           zoom: options.startZoom ?  parseFloat(options.startZoom) : 11,
            closePopupOnClick: false, fadeAnimation: false } );
       var osm = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
      // var yndx = new L.Yandex();
       //var ytraffic = new L.Yandex("null", {traffic:true, opacity:0.8, overlay:true});
      // var ggl = new L.Google();
       var ggl =new L.TileLayer('http://mt0.googleapis.com/vt/lyrs=m@207000000&hl=ru&src=api&x={x}&y={y}&z={z}&s=Galile',{maxZoom: 18,minZoom:3});
       var  gglsats = new L.TileLayer('https://khms1.google.com/kh/v=142&src=app&x={x}&s=&y={y}&z={z}&s=Gali', {maxZoom:18, minZoom:3});

       var yan = new L.TileLayer('http://{s}.maps.yandex.net/tiles?l=map&v=2.31.1&x={x}&s=&y={y}&z={z}&lang=ru-RU',
               {attribution: 'Data, imagery and map information provided by <a href="http://maps.yandex.ru" target="_blank">Yandex</a>',
                   subdomains: ['vec01','vec02','vec03','vec04'],
                   maxZoom: 17, crs: L.CRS.EPSG3395,
                   zIndex: 5});




      // var ytraffic = new L.Yandex("null", {traffic:true, opacity:0.8, overlay:true});
       map.addLayer(window[options.map ? options.map : ggl ]);
     //  map.addControl(new L.Control.Layers( {'OSM':osm, 'Google':ggl, 'Google sat':gglsats , "Yandex":yndx   }, {"Пробки":ytraffic} ));
  // map.addControl(new L.Control.Layers( {'OSM':osm, 'Google':ggl, 'Google sat':gglsats    }  ));

   var baseLayers =  {'OSM':osm, 'Google':ggl, 'Google sat':gglsats, 'Yandex': yan  } ;


   var GoogleTrafficLayer = new L.TileLayer('http://{s}.google.com/vt?hl=ru&src=app&lyrs=m@177000000,traffic|seconds_into_week:-1&x={x}&s=&y={y}&z={z}&style=15',
           {attribution: 'Traffic data provided by <a href="http://maps.google.com" target="_blank">Google</a>',
               maxZoom: 19, subdomains: ['mts0','mts1'],
               traffic: true,
               zIndex: 21});

   YandexExtTrafficLayer = new L.TileLayer('http://jgo.maps.yandex.net/tiles?l=trf,trfe&lang=ru-RU&x={x}&s=&y={y}&z={z}',
           {attribution: 'Traffic data provided by <a href="http://maps.yandex.ru" target="_blank">Yandex</a>',
               maxZoom: 17, crs: L.CRS.EPSG3395,
               traffic: true,
               zIndex: 23});



   var YandexTrafficLayer = new L.TileLayer('http://jgo.maps.yandex.net/tiles?l=trf&lang=ru-RU&x={x}&s=&y={y}&z={z}',
           {attribution: 'Traffic data provided by <a href="http://maps.yandex.ru" target="_blank">Yandex</a>',
               maxZoom: 17, crs: L.CRS.EPSG3395,
               traffic: true,
               zIndex: 22});

    YandexTrafficLayer.getTileUrl = YandexExtTrafficLayer.getTileUrl = function (tilePoint, zoom) {
       var tm = new Date();
       var url = L.TileLayer.prototype.getTileUrl.call(this, tilePoint, zoom);
       return url + '&tm=' + parseInt(tm.getTime()/1000, 10);
   };

   var allLayers = [GoogleTrafficLayer, YandexTrafficLayer, YandexExtTrafficLayer];

   for (var i in allLayers) {
     //  L.Util.stamp(allLayers[i]);
   }
  // L.Util.stamp(YandexExtTrafficLayer) ;


   var trafficLayers = {"Ggl Пробки": GoogleTrafficLayer,
           "Yan Пробки": YandexExtTrafficLayer};


   var layerControl = L.control.layers(baseLayers, trafficLayers, {autoZIndex: false}); layerControl.addTo(map);

       var myIcon; //иконка текущего положения



  //     var point = new L.Point(0, -3); //офсет для попап


       L.polygon([
           [51.509, -0.08],
           [51.503, -0.06],
           [51.51, -0.047]
       ]).addTo(map).bindPopup("I am a polygon.");


       L.circle([50.252, 28.66], 2000, {
           color: 'red',
           fillColor: '#f03',
           fillOpacity: 0.5
       }).addTo(map).bindPopup("Список будет тут (а може еще гдето)");

       var iconDiv; //иконка c дим
       var markerId = [];
       var countMarker = 0;



       var popup = L.popup();
/*
       function onMapClick(e){
          //alert (e.latlng);
           $('#clock2').css('background-color','red');
           //map.panTo(L.latLng(50.439, 30.397)); //центрирование карты
           marker=L.marker(e.latlng, {icon: myIcon}).bindPopup("I am a marker.").addTo(map);
       }
       */

        if(brr =='Android'){
            function geoPosition(){
                try{
                    navigator.geolocation.getCurrentPosition(function(position) {
                        var latitude = position.coords.latitude;
                        var longitude = position.coords.longitude;
                        // alert(latitude+' '+longitude);
                        //scope.show(latitude,longitude)
                        map.panTo(L.latLng(latitude, longitude));
                        map.setZoom(14);
                    });
                }catch (err){

                }

            };
            geoPosition();
        }



   </script>





   <script> // пересчет времени отображения от гринвича
       //var gmt=2; // счещение времени от гринвича

       var activClock=0;


       if(activClock==1){
           //document.getElementById("header").style.width =  width+"px";
           //clock();
           clock.show();
           //pusk();
           clock.start_site();
           zaprosDtp();
       };

       function activSite(){
           activClock=1;
           //clock();
           clock.show();
           pusk();
           clock.start_site();
           zaprosDtp();
       };

     //  var gmt=<?php echo  $gmt; ?>;
   var gmt = parseFloat(options.gmt);
     //  document.getElementById("gmt").value=gmt;

   </script>



   <script>
   // todo обновление координат
   var dlit=5000;  //каждые 5 секунд

   var zaprosPoint;
   var kz= null;
   var timeOut_id, interval_id_z = null, interval_id_dtp=null;
   var disconnect = false;
   function pusk(){
       if(document.getElementById("header").style.width!=((document.body.clientWidth -2) +'px') ){
           document.getElementById("header").style.width=(document.body.clientWidth -2) +'px';
         //  alert(document.body.clientWidth -2);
       };
       if(document.getElementById("map").style.height !=  ((document.body.clientHeight-32)+'px') ){
           document.getElementById("map").style.height =  (document.body.clientHeight-32)+'px';
       }
       if( document.getElementById("div_avto").style.height != (document.body.clientHeight -38) +'px'){
           document.getElementById("div_avto").style.height = (document.body.clientHeight -38) +'px'
       }
       if( document.getElementById("div_information").style.height != (document.body.clientHeight -38) +'px'){
           document.getElementById("div_information").style.height = (document.body.clientHeight -38) +'px'
       }

       if( document.getElementById("scrollbar1").style.height != (document.body.clientHeight -70) +'px'){
           document.getElementById("scrollbar1").style.height = (document.body.clientHeight -70) +'px';

           scrollbar1.tinyscrollbar_update('relative');
          // $('#scrollbar1').tinyscrollbar();
       }
       if( document.getElementById("scrollbar2").style.height != (document.body.clientHeight -170) +'px'){
           document.getElementById("scrollbar2").style.height = (document.body.clientHeight -170) +'px';

           scrollbar2.tinyscrollbar_update();
           // $('#scrollbar1').tinyscrollbar();
       }



       if(!eventBlock.blocked && !zaprosPoint){ // eсли мышкой не заблокированно и запрос не начался
           zaprosPoint = true;
           $('#clock2').parent('td').css("background-color",'#transparent');

           $.ajax({
               type:'POST',
               url:'news.php',
               data:'pass=' + pass + '&login=' + login,
               success:function (data) {
                   zaprosPoint = false;
                   disconnect = false;
                   $('#clock2').parent('td').css("background-color",'#transparent');
                   kz = data;
                   if(!eventBlock.blocked){
                       app.news(data) ;
                       clock.show_request();
                       eventBlock.clearStart_z();
                   }
               },
               error: function(xhr, status, error){
                   console.log('Обрыв связи1');
                   disconnect = true;
                   $('#clock2').parent('td').css("background-color",'#ff0000');
                   setTimeout(function(){ eventBlock.clearStart_z();},5000)
               }

           });
       }else{
           if(!eventBlock.blocked){
               eventBlock.clearStart_z();
           }
       }


   };

   function repeadZapros(){
       try{
           kz = $.ajax({
               type:'POST',
               url:'z.php',
               data:'countUzers=' + countUzers + '&login=' + login,
               async: false,
               success:function (data) {
                   zaprosPoint = false;
                   disconnect = false;
                   $('#clock2').parent('td').css("background-color",'transparent');

               },
               error: function(xhr, status, error){
                   console.log('Обрыв связи2');
                   disconnect = true;
                   $('#clock2').parent('td').css("background-color",'#ff0000');
               }

           }).responseText;
           proverka_popoln();
           setTimeout(function(){
               pusk();
               setTimeout(function(){
                           repeatZaprosEvens()
                       },5000);
           },5000);
       }catch (err){
           setTimeout(function(){repeadZapros();},5000);
       }
   };





//todo тач старт


   function myTouchStop(event) {
       var touches = event.changedTouches,
               first = touches[0],
               type = "";
       switch(event.type)
       {
           case "touchstart": type = "mousedown"; break;
           case "touchmove":  type="mousemove"; break;
           case "touchend":   type="mouseup"; break;
           default: return;
       }

       var simulatedEvent = document.createEvent("MouseEvent");
       simulatedEvent.initMouseEvent(type, true, true, window, 1,
               first.screenX, first.screenY,
               first.clientX, first.clientY, false,
               false, false, false, 0/*left*/, null);


       var c = map.getContainer();
       var p = L.DomEvent.getMousePosition( simulatedEvent, c);
       var latlng = map.containerPointToLatLng(p);

       if(disconnect == true){
           $('#clock2').parent('td').css("background-color",'#ff0000');
       }else{
           $('#clock2').parent('td').css("background-color",'transparent');
       }

       eventBlock.blocked = false;

       eventBlock.clearStart_z();
       eventBlock.clearStart_dtp();

   };
   document.getElementById('map').addEventListener('touchend', myTouchStop, false);


   function myTouchStart(event) {
       var touches = event.changedTouches,
               first = touches[0],
               type = "";
       switch(event.type)
       {
           case "touchstart": type = "mousedown"; break;
           case "touchmove":  type="mousemove"; break;
           case "touchend":   type="mouseup"; break;
           default: return;
       }
       var simulatedEvent = document.createEvent("MouseEvent");
       simulatedEvent.initMouseEvent(type, true, true, window, 1,
               first.screenX, first.screenY,
               first.clientX, first.clientY, false,
               false, false, false, 0/*left*/, null);


       var c = map.getContainer();
       var p = L.DomEvent.getMousePosition( simulatedEvent, c);
       var latlng = map.containerPointToLatLng(p);
       $('#clock2').parent('td').css("background-color",'#8E9799');
       eventBlock.blocked = true;
   };
   document.getElementById('map').addEventListener('touchstart', myTouchStart, false);


   // cобытия мыши на блокировку запроса
   map.on('mousedown', function(){
       $('#clock2').parent('td').css("background-color",'#8E9799');
       eventBlock.blocked = true;
   });
   map.on('mouseup', function(){
       if(disconnect == true){
           $('#clock2').parent('td').css("background-color",'#ff0000');
       }else{
           $('#clock2').parent('td').css("background-color",'transparent');
       }
       eventBlock.blocked = null;
       eventBlock.clearStart_z();
       eventBlock.clearStart_dtp();
   });
   document.onmouseup = function(){
       if(disconnect == true){
           $('#clock2').parent('td').css("background-color",'#ff0000');
       }else{
           $('#clock2').parent('td').css("background-color",'transparent');
       }
       eventBlock.blocked = false;
       $('.timer').eq(1).css("background-color",'transparent');
      // alert('ds')
   };
   //////////////////////////////////////////

       var ok=[];
       var arrOk=[];
       //var pi;
       var iv;

   </script>

















   <!--todo СОБЫТИЯ! DTP -->


    <script>//////////////////////////////////////////////////////////////////////////////////////// СОБЫТИЯ!
      //  var event=<?php echo  $event; ?>; //подписка на события
     //   var event_change=<?php echo  $event_change; ?>;//возможность добавлять события
     //   var event_confirm=<?php echo  $event_confirm; ?>;// возможность редактировать - добавлять удалять подтверждать

    var event; //подписка на события
    var event_change;//возможность добавлять события
    var event_confirm;// возможность редактировать - добавлять удалять подтверждать

    if(options.event == "true"){
        event = 1;
        event_change = 1;
        event_confirm = 1;
    }else{
		document.getElementById("confirm_event").style.display="none";
		document.getElementById("send_email").style.display="none";
		document.getElementById("action_event").style.display="none";
	}

        if (event_confirm==0){
            document.getElementById("confirm_event").style.display="none";
            document.getElementById("send_email").style.display="none";
        }

        if (event_change==0){
            document.getElementById("action_event").style.display="none";
        }


        document.getElementById("information").onclick=information;

        function information(){
            if(document.getElementById("div_information").style.visibility=="visible"){
                document.getElementById("div_information").style.visibility="hidden";
               // document.getElementById("information").style.color="#000";
                //document.getElementById("information").style.textShadow="none";

            }else{
                document.getElementById("div_information").style.visibility="visible";
              //  document.getElementById("information").style.color="#fff";
               // document.getElementById("information").style.textShadow="0px 0px 1px #fff,0px 0px 5px #caf5fc,0px 0px 5px #caf5fc,0px 0px 5px #caf5fc  ";
            }

        }


    </script>

    <script>
        var dtpIcon; //иконка ДТП
        dtpIcon = L.icon({
            iconUrl: 'images/mrk_dtp.png',
            iconRetinaUrl: 'my-icon@2x.png',
            iconSize: [20, 20],
            iconAnchor: [10, 10]
        });
		var dmarker = L.icon({
			iconUrl: 'images/default_marker.png',
			iconSize: [25, 40],
			iconAnchor: [12, 40]
		});

        var dtpIconTemp; //иконка ДТП
        dtpIconTemp = L.icon({
            iconUrl: 'images/mrk_dtp.png',
            iconRetinaUrl: 'my-icon@2x.png',
            iconSize: [24, 24],
            iconAnchor: [12, 12]
        });

        var malIcon; //иконка ДТП
        malIcon = L.icon({
            iconUrl: 'images/mrk_malfunction.png',
            iconRetinaUrl: 'my-icon@2x.png',
            iconSize: [20, 20],
            iconAnchor: [10, 10]

        });

        var dlit=5000;  //каждые 5 секунд
        //z = setTimeout(zaprosDtp, 1000); // через секунду посылаем запрос

        var activdtp="0";
        var dtp;
        var timerAjax = null;

        var zaprosAjDtp = null;
//todo запросы на дтп
        function zaprosDtp(){
           // console.log('zaprosDtp');
            if(!eventBlock.blocked && !zaprosAjDtp){ // eсли мышкой не заблокированно и запрос не начался
                zaprosAjDtp = true;  // запрос начался

                    $.ajax({

                        type:'POST',
                        url:'dtp.php',
                        data: 'login='+login+'&pass='+pass,
                        //async: false,
                        success: function (data){
                            zaprosAjDtp = false;
                            dtp = data;
                            if(!eventBlock.blocked){
                                proverkaDtp(dtp); //получаем посылку и запускаем проверку есть ли новая посылка
                                eventBlock.clearStart_dtp();
                            }
                        },
                        error: function(xhr, status, error){
                            zaprosAjDtp  = false;
                            console.log('Обрыв связи Дтп1');
                          //  setTimeout(function(){repeatZaprosEvens();},5000)
                        }

                    })
            }else{
                    eventBlock.clearStart_dtp();
            }
        };

        /*
        function repeatZaprosEvens(){
            try{
                dtp = $.ajax({
                    type:'POST',
                    url:'dtp.php',
                    data: 'login='+login+'&event='+event+'&event_change='+event_change+'&event_confirm='+event_confirm,
                    async: false,
                    success: function (data){

                    }
                }).responseText;
                proverkaDtp(dtp);
                setTimeout(function(){zaprosDtp();},5000)
            }catch (err){
                setTimeout(function(){repeatZaprosEvens();},5000)
            }
        };
        */



        function repeatZaprosEvens(){
            try{
                dtp = $.ajax({
                    type:'POST',
                    url:'dtp.php',
                    data: 'login='+login+'&event='+event+'&event_change='+event_change+'&event_confirm='+event_confirm,
                    async: false,
                    success:function (data) {


                    },
                    error: function(xhr, status, error){
                        console.log('Обрыв связи Дтп2');
                        disconnect = true;
                        $('#clock2').parent('td').css("background-color",'#ff0000');
                    }

                }).responseText;
                proverkaDtp(dtp);

                setTimeout(function(){zaprosDtp(); console.log('Синхронно востановлено ДТП');},5000);

            }catch (err){
                console.log('Обрыв связи Дтп3');
                setTimeout(function(){repeatZaprosEvens();},5000);
              //  setTimeout(function(){repeatZaprosEvens();},5000);
            }
        };




        var markerD=[];
        var dtpParam=[];

        function proverkaDtp(dtp){

            if (activdtp == dtp){
                //alert ("ничего нового"); //ничего не делаем
            }else{
                removeOllDtp();
                var fulllarrdtp=[];
                activdtp=dtp;
                var arrStrokaDtp=dtp.split("&#33");
                var a="";

                for(var i=0; i<arrStrokaDtp.length; i++){
                    fulllarrdtp[i]=arrStrokaDtp[i].split("&#32");
                }
                dtpParam=fulllarrdtp; //полный массив текущих дтп
                addnewDtp(fulllarrdtp);   //добавляем дтп на карту
            }
        }
        var countDtp=0;
        var idDisplay=[];
        var color_event=[]; //цвет покарски текста в текстовом окне
        var infoText="", tableDtpText = '';
        function addnewDtp(f){
            var comment, _id;
            countDtp=0;
            idDisplay=[];
            infoText="";
            for(var i=0; i<f.length-1; i++){
                var lat = f[i][1];
                var lng = f[i][2];
                //var date = unparseTime(f[i][3]);

				var date=calcTime.unparse(f[i][3]);
                var typeEvent=f[i][4];
                if(typeEvent=="accident"){
                    typeEvent="ДТП";
                }else{
                    typeEvent="Поломка"
                }



                if (f[i][7]==0){
                    color_event[i]="gray";
                }
                if(f[i][7]==1){
                    color_event[i]="blue";
                }
                comment = f[i][5];
                _id=f[i][0];

                infoText = '<div style="width: 100%; position: relative;">'+

                        '<table style="width: 100%; position: relative;" cellpadding="0" cellspacing="0">' +
                        '<tr>' +
                             '<td>'+ '<div id='+"d"+f[i][0]+' '+'onclick="start(this)"'+'style="color:'+color_event[i]+'">' +f[i][0]+". "+f[i][8]+" "+typeEvent+"<br>"+date+"<br>" +"<p id='comment"+_id+"'>"+comment+"</p>"+"</div>"+' </td>'+
                        '</tr>' +
                         '<tr>' +
                            '<td class="button3"'+'id="buttonDtpParam'+f[i][0]+'"'+'onclick="dtpEvent.eventClick('+f[i][0]+');'+'"> '+
                             //    '<div class="button" style="margin-left: 16px; bottom: 0px;  width: 100%">3</div>'+
                            ' </td>' +
                         '</tr>' +
                        '</table> '+

                        '</div>'+infoText;



              //  infoText='<p id='+"d"+f[i][0]+' '+'onclick="start(this)"'+'style="color:'+color_event[i]+'">' +f[i][0]+". "+f[i][8]+" "+typeEvent+"<br>"+date+"<br>" +f[i][5]+"</p>"+infoText; // f[i][3] -время
                //infoText='<p id='+"d"+f[i][0]+' '+'onclick="start(this)"'+'style="color:'+color_event[i]+'">' +f[i][0]+". "+f[i][8]+" "+typeEvent+"<br>"+date+"<br>" +f[i][5]+"</p>"+infoText; // f[i][3] -время
                if (f[i][4]=="accident"){
                    var ico=dtpIcon;
                }else{
                    var ico=malIcon;
                }

                if(lat!=0 && lng!=0){
                    markerD[i]=L.marker([lat, lng], {icon: ico}).bindPopup(f[i][0]+". "+date+"<br>" +f[i][5]);
                    markerD[i].addTo(map);
                }



                idDisplay[i]= "d"+f[i][0]; // актуальные id
                countDtp++;   //уеличиваем счетчик текущих дтп
            }

            addInfoText(infoText);

        }

        function addInfoText(t){
            document.getElementById("infoText").innerHTML = t;
            scrollbar2.tinyscrollbar_update();
        }

        function removeOllDtp(){ //удаление всех маркеров дтп
            for(var i=0; i<countDtp; i++){
                try{
                    map.removeLayer(markerD[i]);
                } catch(err){};
            }
        }

        var selectIdDtp;
        function start(obj)	{ // по клику на дтп
            var id=obj.id; // id дтп равно
            var n;
            var countId= id.replace( 'd', '' );
            document.getElementById("selectRemove").innerHTML = " "+countId; //в ремове пишем номер дтп
            document.getElementById("span_event").innerHTML = " "+countId;
            selectIdDtp=countId;

            var text=document.getElementById(id).innerHTML;
            //alert (text);

            for(var i=0; i<countDtp; i++){

                document.getElementById(idDisplay[i]).style.color=color_event[i]; //всем  назначаем тот цвет, который был в посылке серый цвет
                if(dtpParam[i][0]==countId){
                    n=i; // n номер в массиве этого дтп
                }
            }
            document.getElementById(id).style.color="red";  //теперь только активному
            if(dtpParam[n][1]!=0){
                map.panTo(L.latLng(dtpParam[n][1], dtpParam[n][2])); //центрируем на выбранном дтп
            }
            document.getElementById("commentTextEmail").value="";
            var arr_text=text.split("<br>");
            text=arr_text[2];
            //text=text.replace("<br>", "\r\n ");
            document.getElementById("commentTextEmail").value = $(obj).find('p').html();

        }
        document.getElementById("removeDtp").onclick=removeDtp;

        var indexRemoveDtp=0;
        function removeDtp(){
            if(indexRemoveDtp==1){
              //  document.getElementById("removeDtp").style.color="#000";
              //  document.getElementById("removeDtp").style.textShadow="none";
                indexRemoveDtp=0;
                //removeMark();
                document.getElementById("div_confirm_cancel_dtp").style.visibility="hidden";
            }else{

              //  document.getElementById("removeDtp").style.color="#fff";
             //   document.getElementById("removeDtp").style.textShadow="0px 0px 1px #fff,0px 0px 5px #caf5fc,0px 0px 5px #caf5fc,0px 0px 5px #caf5fc  ";
                indexRemoveDtp=1;
                document.getElementById("div_confirm_cancel_dtp").style.visibility="visible";
            }
        }

        document.getElementById("cancel_remove").onclick=removeDtp;
        function confirm_event_to_db(){

            conf_event=$.ajax({

                type:'POST',
                url:'confirm_event.php',
                data: 'login='+login+'&id='+selectIdDtp, //логин и id дтп
                async: false,
                success: function (data){
                    //alert(data);
                    //proverka_popoln();

                }
            }).responseText;
        }

        document.getElementById("confirm_event").onclick=confirm_event_to_db;
        document.getElementById("confirm_remove").onclick=RemDtpDb; //запуск исменений в БД

        function RemDtpDb(){
            removeDtp();
            Rem = $.ajax({
                type:'POST',
                url:'remDtp.php',
                data: 'login='+login+'&id='+selectIdDtp+'&event='+event+'&event_change='+event_change+'&event_confirm='+event_confirm, //логин и id дтп
                async: false,
                success: function (data){
                    //alert(data);
                    //proverka_popoln();
                }

            }).responseText;
        };
        //todo поставить маркер на карте
        var setDtpLatLng=null;
        var indexMarkMap=0;
        var clickTempMark= 0, tempMarker;
        document.getElementById("markMap").onclick=markMap;
     //   document.getElementById("cancel_dtp").onclick=markMap;
        function markMap(){  // изменение подсветки
            if(indexMarkMap==1){
              //  document.getElementById("markMap").style.color="#000";
               // document.getElementById("markMap").style.textShadow="none";
                document.getElementById("div_confirm_dtp").style.visibility="hidden";
                try{
                    map.removeLayer(tempMarker);
                } catch(err){};
                setDtpLatLng=null;
                indexMarkMap=0;
            }else{
               // document.getElementById("markMap").style.color="#fff";
              //  document.getElementById("markMap").style.textShadow="0px 0px 1px #fff,0px 0px 5px #caf5fc,0px 0px 5px #caf5fc,0px 0px 5px #caf5fc  ";
                indexMarkMap=1;
                clickTempMark=0;
                document.getElementById("div_confirm_dtp").style.visibility="visible";
            }
        };




        map.on('click', onMapClick); // следит за кликом на карте


        function onMapClick(e){
            if(tempMarker){
                map.removeLayer(tempMarker);
                tempMarker = null;
            }
            if (indexMarkMap==1){  //если нажата кнопочка адд маркер, выполняем  //////////////////////////////////////////////////////////////////////////////////////////////////////
                if (type=="accident"){
                    var ico=dtpIconTemp;
                }else{
                    var ico=malIcon;
                }
                tempMarker=L.marker(e.latlng, {icon: ico}).addTo(map); //ставим временный маркер
                clickTempMark=1;
                setDtpLatLng=e.latlng;
            }
        }

        //document.getElementById("confirm").onclick=checkCon;  // при подтверждении запускаем проверку сделанных действий
        function checkCon(){
            clickTempMark=0;
            startIntoBD();
        }

        var type="accident"; // тип события по умолчанию
        function startIntoBD(){ //
            var temp, tempArr=[], lat, lng;
            if(setDtpLatLng){
                temp=setDtpLatLng.toString();
                temp=temp.replace( 'LatLng(', '' );
                temp=temp.replace(')','');
                tempArr=temp.split(',');
                lat=tempArr[0];
                lng=tempArr[1];
            }else{
                lat = 0;
                lng = 0;
            }




			var datatime=calcTime.present_time();

            var comment=getText();


            markMap();
            recordDtp = $.ajax({

                type:'POST',
                url:'recordDtp.php',
                data: 'lat='+lat+'&lng=' +lng+ '&datatime='+datatime+'&type='+type+'&comment='+comment+'&login='+login+'&event='+event+'&event_change='+event_change+'&event_confirm='+event_confirm, //посылаем маркер в дб
                async: false,
                success: function (data){
                    zaprosDtp();
                }
            }).responseText;
        }


        function getText(){
            var text="";
            text=document.getElementById("commentText").value; //берем текст
            document.getElementById("commentText").value=""; // и очищаем
            return text;
        }

        var globalTypeEvent='accident';
        function clickType(obj){
            type=obj.id;

            globalTypeEvent =  obj.id


            document.getElementById("accidentText").style.color="#000";
            document.getElementById("accidentText").style.textShadow="none";
            document.getElementById("accident").style.background ="none";
            document.getElementById("malfunctionText").style.color="#000";
            document.getElementById("malfunctionText").style.textShadow="none";
            document.getElementById("malfunction").style.background ="none";

            document.getElementById(type+"Text").style.color="#fff";
            document.getElementById(type+"Text").style.textShadow="0px 0px 1px #fff,0px 0px 5px #caf5fc,0px 0px 5px #caf5fc,0px 0px 5px #caf5fc  ";
            document.getElementById(type).style.background ="#6fd5ff";
        };

        document.getElementById("resetParam").onclick=resetParam;
        function resetParam(){

            document.getElementById("accidentText").style.color="#000";
            document.getElementById("accidentText").style.textShadow="none";
            document.getElementById("accident").style.background ="none";
            document.getElementById("malfunctionText").style.color="#000";
            document.getElementById("malfunctionText").style.textShadow="none";
            document.getElementById("malfunction").style.background ="none";
            type="accident";
            globalTypeEvent = "accident";

            for(var i=0; i<countDtp; i++){

                document.getElementById(idDisplay[i]).style.color=color_event[i]; //всем  назначаем тот цвет, который был в посылке серый цвет

            }

        }

    </script>

    <script>
        //нажатие на области
        document.getElementById("oblasti").onclick=oblasti;

        function oblasti(){
            vhide(this);
            if(document.getElementById("div_oblasti").style.visibility=="visible"){
                document.getElementById("div_oblasti").style.visibility="hidden";
            }else{
                document.getElementById("div_oblasti").style.visibility="visible";
                _oblasti();
            }

        }

        function _oblasti(){
            document.getElementById("div_oblasti").style.visibility="visible";
            var text_oblasti = $.ajax({

                type:'POST',
                url:'oblasti.php',
                data: 'login='+login, //
                async: false,
                success: function (data){

                }

            }).responseText;
            //alert(text_oblasti);
            document.getElementById("div_oblasti").innerHTML = text_oblasti;
        }
    </script>


    <script type="text/javascript">
        var loadPersonal = null;
        var dtpOnMap = null;
        //var regions = null;

        function dhtmlLoadScript(url, success)
        {
            var e = document.createElement("script");
            e.src = url;
            e.type="text/javascript";
            document.getElementsByTagName("head")[0].appendChild(e);
           setTimeout(function(){

           },100)
        }

        function loadScript(url){
            if(!loadPersonal && url=='js/Personal.js'){
                dhtmlLoadScript(url);
            }
            if(!dtpOnMap && url=='js/DtpOnMap.js'){
                dhtmlLoadScript(url);
            }

            if(url=='js/Regions.js'){
                if( !regions && url == 'js/Regions.js'){
                    dhtmlLoadScript(url);
                }
                if(regions){

                    regions.setDiv();
                }
            }

        }

    </script>



</html>
